<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Pragma" content="no-cache" /> 
    <meta http-equiv="Expires" content="-1" /> 
    <meta http-equiv="Cache-Control" content="no-cache" /> 
    <title>StickyHead Demo</title>
    
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>
    
    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="stickyhead.min.js"></script>
    <script>
    $(function() {
        $('.table').stickyhead({'top_bar':'#top_bar'})
    });
    </script>
    
</head>

<body>
    <div id="top_bar" class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <span class="brand appname">StickyHead Demo</span>
        
          <p class="navbar-text pull-right">where the head <a href="#">sticks</a></p>
        </div>
      </div>
    </div>
    
    <div class="hero-unit">
    <h2>StickyHead: a jQuery plugin for sticking table head
    <a href="http://stickyhead.googlecode.com/files/stickyhead.1.1.min.js" 
    target="_blank" class="btn btn-large btn-primary">Download Plugin (1.5 kb)</a>
    <a href="http://code.google.com/p/stickyhead/source/browse/trunk/stickyhead.js" 
    target="_blank" class="btn">View Source</a> 
    </h2>
    <hr/>
    <p>
    HTML table has a problem, there is no easy way to fix the header. A quick google search brings up many questions on stackoverflow
    and many projects and half baked solutions attempting to fix this. Main problem in all the solution is that each table need to have 
    fixed height so that it can have a scrollbar. So that is now two problems, height restriction + ugly scrollbars in each table.
    </p>
    
    <p>
    In my case I had many report pages where there are several tables, I don't want to add scrollbar to each of them, instead a cleaner
    look would be to use main browser vertical-scrollbar for scrolling, but as table header goes out of view, user have
    no way to know what is the header for a given column, here comes the <em>StickyHead</em> which pins/sticks the head of the table
    to top of the page as user scrolls, that is best explained via this demo. <br>
    <small>Tested on Chrome, Firefox, IE7/IE8/IE9.</small>
    <p>
    <strong> Scroll the page and see how table head sticks </strong>
    </p>
    </div>
    
    <div class="container">
    <div class="row">
    <div class="span12">
    To use stickyhead is very simple e.g.
    
    <pre>
    $(function() {
        $('.table').stickyhead({'top_bar':'#top_bar'})
    });
    </pre>
    
    This make the <em>head</em> of all the tables on this page sticky, keep scrolling to see it in <em>action</em>, on tables below.
    <br>
    
    <strong>Various options taken by stickyhead</strong><br>
    <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>Option</th>
            <th>Default</th>
            <th>Description</th>
            <th>Example</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <code>top_bar</code>
            </td>
            <td>
              <code>null</code>
            </td>
            <td>
              css selector for the top fixed bar on the page e.g. see this page, when table head goes under top black bar, 
              we pin/stick the head.
            </td>
            <td>
            <code>$('.table').stickyhead({'top_bar':'#top_bar'})</code>
            </td>
          </tr>
          
          <tr>
            <td>
              <code>top_bar_height</code>
            </td>
            <td>
              <code>null</code>
            </td>
            <td>
              If you know the height of top bar you can just pass that instead of us calculating it.
            </td>
            <td>
            <code>$('.table').stickyhead({'top_bar_height':40})</code>
            </td>
          </tr>
          
          <tr>
            <td>
              <code>css</code>
            </td>
            <td>
              <code>{'background-color':'#ffffff', 'border-bottom':'1px solid #cccccc'}</code>
            </td>
            <td>
              If you want to modify css of stickyhead, you can pass that e.g. if table head has no background color, rows will show thru
              it when scrolled, so we set a solid background and a bottom border.
            </td>
            <td style="width:400px;">
            <pre>
$('.table').stickyhead({
  'css':{
      'background-color':'#ffffff', 
      'border-bottom':'1px solid #cccccc'
  }
})
            </pre>
            </td>
          </tr>
          
          <tr>
            <td>
              <code>with_data_and_events</code>
            </td>
            <td>
              <code>true</code>
            </td>
            <td>
              If you know copy the events and data associated with table head to stickyhead, pass <code>true</code> else <code>false</code>
            </td>
            <td>
            <code>$('.table').stickyhead({'with_data_and_events':true})</code>
            </td>
          </tr>
          
          
        </tbody>
      </table>
    </div>
    </div>
      
    Two dynamically generated long tables side by side<br>
      
    <div class="container-fluid">
    <div class="row-fluid">
    <div class="span6">
    <table id="table1" class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    </div>
    <div class="span6">
    <table id="table2" class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>Another Col1</th>
            <th>Another Col2</th>
            <th>Another Col3</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    </div>
    <script>
    var table1 = $('#table1 tbody')
    var table2 = $('#table2 tbody')
    for(var i=0;i<100;i++){
      var row = "<tr><td>"+i+" value 1</td><td>"+i+" long value 2</td><td>"+i+" very very long long value 3</td></tr>"
      table1.append(row)
      table2.append(row)
    }
    </script>
    </div>
    </div>
    
</body>
    